<template>
  <div class="flex border-b flex-col justify-center items-start w-full px-3 py-3">
    <div class="h-1/6 w-full flex justify-center items-center">
      <div class="flex justify-center items-center w-1/6 ">
        <img v-if="user?.['avatar'] != null" class="w-12 h-12 object-cover avatar rounded-full" :srcset="user?.['avatar']" alt="">
        <div v-else class="w-12 h-12 object-cover avatar rounded-full border text-xl flex justify-center items-center">{{ user?.['username'].charAt(0).toUpperCase() }}</div>
      </div>
      <div class="flex flex-col justify-center items-start w-5/6 ">
        <p class="text-md font-bold">{{ user?.['username'] }}</p>
        <p class="text-xs">{{ props.comments?.['createdAt'] }}</p>
      </div>
    </div>
    <div class="h-full w-full flex justify-start items-center">
      <div class="flex justify-center items-center w-1/6">
      </div>
      <div class="flex flex-col justify-start items-start w-5/6">
        <div v-if="show" class="break-all break-words truncate text-left w-full h-full font-bold text-xl p-1">
          {{ props.comments?.['content'] }}
        </div>
        <div v-else class="break-all break-words text-left w-full h-full font-bold text-xl p-1">
          {{ props.comments?.['content'] }}
        </div>
        <div v-if="props.comments?.content?.['length'] > 50">
          <div v-if="show" @click="show=false" class="my-2 text-primary">展开</div>
          <div v-else @click="show=true" class="my-2 text-primary">收缩</div>
        </div>
      </div>
    </div>
    <div class=" w-full flex justify-start items-center p-1">
      <div class="flex justify-center items-center w-1/6">
      </div>
      <div v-if="useAuthStore().isAuthenticated" class="flex flex-col justify-start items-start w-5/6 ">
        <div class="w-full flex flex-row justify-start items-center gap-3">
          <div @click="showReply=!showReply" class="rounded-full">
            <svg v-if="showReply==false" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
              <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 12.76c0 1.6 1.123 2.994 2.707 3.227 1.068.157 2.148.279 3.238.364.466.037.893.281 1.153.671L12 21l2.652-3.978c.26-.39.687-.634 1.153-.67 1.09-.086 2.17-.208 3.238-.365 1.584-.233 2.707-1.626 2.707-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0012 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018z" />
            </svg>
            <svg v-else xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
              <path stroke-linecap="round" stroke-linejoin="round" d="M7.5 8.25h9m-9 3H12m-9.75 1.51c0 1.6 1.123 2.994 2.707 3.227 1.129.166 2.27.293 3.423.379.35.026.67.21.865.501L12 21l2.755-4.133a1.14 1.14 0 01.865-.501 48.172 48.172 0 003.423-.379c1.584-.233 2.707-1.626 2.707-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0012 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018z" />
            </svg>
          </div>
          <label v-if="props.comments?.['userId'] == hook_getUser()?.['id']" :for="'comment' + props.comments?.['id'] " class="rounded-full">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
              <path stroke-linecap="round" stroke-linejoin="round" d="M20.25 7.5l-.625 10.632a2.25 2.25 0 01-2.247 2.118H6.622a2.25 2.25 0 01-2.247-2.118L3.75 7.5m6 4.125l2.25 2.25m0 0l2.25 2.25M12 13.875l2.25-2.25M12 13.875l-2.25 2.25M3.375 7.5h17.25c.621 0 1.125-.504 1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125z" />
            </svg>
          </label>
          <!-- 删除评论 -->
          <input type="checkbox" :id="'comment' + props.comments?.['id']" class="modal-toggle" />
          <div class="modal">
            <div class="modal-box">
              <h3 class="font-bold text-lg">是否删除评论？</h3>
              <div class="modal-action">
                <label :for="'comment' + props.comments?.['id']" class="btn">取消</label>
                <label @click="removeComment()" :for="'comment' + props.comments?.['id']" class="btn btn-error">删除</label>
              </div>
            </div>
          </div>
        </div>
        <div v-if="showReply" class="flex flex-row max-h-20 h-full w-full mt-2 gap-2">
          <textarea v-model="comments.content" class="textarea textarea-bordered h-12 min-h-12 max-h-20 w-full " placeholder="回复内容"></textarea>
          <div @click="addComments()" class="btn btn-primary max-h-16">发送</div>
        </div>
<!--   这里是回复评论区    -->
        <div v-if="replys?.['length'] >0" class="rounded-xl flex flex-col w-full bg-primary/10 text-sm p-2 mt-2">
          <replay @deleteReply="getReplysData()" :is-not-to-reply="true" :deep="0" v-for="(reply,index) in replys" :reply="reply" :key="index" :comment="props.comments"></replay>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">

import {onMounted, ref, watch} from "vue";
import Replay from "./replay.vue";
import {
  Comments,
  Comments_addComments, Comments_deleteCommentsById,
  Comments_findReplyListFromCommentsByReplyId,
  Type
} from "../hook/CommentsHook.ts";
import {hook_findUserById, hook_getUser} from "../hook/UserHook.ts";
import {useAuthStore} from "../plugins/pinia.ts";

let props = defineProps<{
  comments
}>()
let emit = defineEmits<{
  (e:'deleteComments')
}>()
let user = ref()

let show = ref(true)

let showReply = ref(false)
let replys = ref<Array<any>>()
onMounted(async () => {
  await getReplysData()
  await hook_findUserById(props.comments?.['userId'],cb=>{
    user.value = cb
  })
})


async function getReplysData() {
  let promise = await Comments_findReplyListFromCommentsByReplyId(props.comments?.['id']);
  console.log(promise)
  replys.value = <Array<any>> promise
}

let comments = ref<Comments>(new Comments());
async function addComments() {
  comments.value.type = Type.Reply
  comments.value.userId = hook_getUser()?.['id']
  comments.value.replyId = props.comments?.['id']

  console.log(comments.value)

  await Comments_addComments(comments.value)
  comments.value = new Comments();
  await getReplysData()
}

async function removeComment() {
  await Comments_deleteCommentsById(props.comments.id)
  comments.value = new Comments();
  emit('deleteComments')
}



</script>

<style scoped>

</style>